{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
    <form method="post" class="form-recharge">
        <div class="mui-card">

            <ul class="mui-table-view ">

                <li class="mui-table-view-divider">充值金额</li>
                <div class="mui-input-row padding-10">
                    <input type="number" placeholder="输入充值金额" name="order_amount" min="0.01">
                </div>
                <li class="mui-table-view-divider">支付方式</li>
                {% for val in paylist %}
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio"  value="{{val.id}}" {% if val.id== order.payment %} checked {% endif%}>

                    <div class="mui-media-object mui-pull-left"><img src="{{val.logo}}"> </span>
                    </div>
                    <div class="mui-media-body">
                        {{val.title}}
                    </div>
                </li>
                {% endfor %}
                {% if controller.setup.PREPAID == 0 %}
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio"  value="100" {% if paylist|length == 0  or 100== order.payment %} checked {% endif%}>
                    <div class="mui-media-object mui-pull-left"><img src="/static/admin/img/pingxx/yfk.png"> </span>
                    </div>
                    <div class="mui-media-body">
                        预付款支付
                    </div>
                </li>
                {% endif %}
                {% if controller.setup.COD == 0 %}
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio"  value="1001"  {% if (paylist|length == 0 and controller.setup.PREPAID == 1) or 1001== order.payment %} checked {% endif%}>
                    <div class="mui-media-object mui-pull-left"><img src="/static/admin/img/pingxx/hdfk.png"> </span>
                    </div>
                    <div class="mui-media-body">
                        货到付款
                    </div>
                </li>
                {% endif %}
            </ul></div>
        <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
            <input type="hidden" value="{{order.id}}" name="order_id">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="pay">下一步</button>
        </div>
    </form>
</div>

{% endblock%}

{% block script %}
<script type="text/javascript" src="/static/mobile/libs/pingpp/pingpp.js"></script>
<script>
    var falg = false;
    $("#pay").on("tap",function () {
        if(falg){
            return false;
        }
        var order_amount = $("input[name='order_amount']").val();
        var payment = $("input[name='payment']:checked").val();
        if(payment===undefined){
            mui.toast("请选择一种支付方式");
            return;
        }
        console.log(order_amount);
        console.log(payment);
        var that = this;
        $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
        falg = true;
        mui.post("/center/account/recharge",{order_amount:order_amount,payment:payment},function(data){
            if (data.errno!=1000) {
                if (data.data.url) {
                    mui.toast(data.data.name + ' 即将跳转~');
                }else if(data.data.data){
                    mui.toast(data.data.name);
                    pingpp.createPayment(data.data.data, function(result, err) {
                        console.log(result);
                        console.log(err);
                        if(payment==5){
                            if (result == "success") {
                                mui.openWindow({url: '/center/pay/payres/?order_no='+data.data.data.order_no});
                                // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL。
                            } else if (result == "fail") {
//                            mui.openWindow({url: data.data.wx_hub_url});
                                // charge 不正确或者微信公众账号支付失败时会在此处返回
                            } else if (result == "cancel") {
                                // 微信公众账号支付取消支付
                            }

                        }
                    });
                }
                setTimeout(function(){
                    $(that).removeClass('disabled').prop('disabled',false);
                    falg=false;
                    if (data.data.url) {
                        mui.openWindow({url: data.data.url})
                    }
                },1500);
            }else{
                mui.toast(data.errmsg);
                setTimeout(function(){
                    $(that).removeClass('disabled').prop('disabled',false);
                    falg=false;
                    if (data.data) {
                        mui.openWindow({url: data.data})
                    }
                },1500);
            }
        },'json');
        return;
    })
</script>
{% endblock %}
